<template>
  <div>
    <a-modal
      class="modal"
      title='日志详情'
      :visible="visible"
      destroyOnClose
      @cancel="cancel"
    >
      <a-spin tip="Loading..." :spinning="loading">
        <a-form
          ref="ruleForm"
          :form="form"
          :label-col="{span:3}"
          :wrapper-col="{span:20}"
          layout="horizontal"
        >
          <a-form-item label="操作模块">
            <a-input
              id="title"
              v-decorator="['operationModule', {initialValue: initValues.operationModule,} ]"
              placeholder="请输入操作模块..."
              disabled
            />
          </a-form-item>
          <a-form-item label="请求地址">
            <a-input
              id="title"
              v-decorator="['requestPath', {initialValue:initValues.requestPath,} ]"
              placeholder="请输入请求地址..."
              disabled
            />
          </a-form-item>
          <a-form-item label="登录信息">
            <a-input
              id="title"
              v-decorator="['loginInfo', {initialValue:initValues.loginInfo,} ]"
              placeholder="请输入登录信息..."
              disabled
            />
          </a-form-item>
          <a-form-item label="请求方式">
            <a-input
              id="title"
              v-decorator="['requestMethod', {initialValue:initValues.requestMethod,} ]"
              placeholder="请输入请求方式..."
              disabled
            />
          </a-form-item>
          <a-form-item label="操作方式">
            <a-textarea
              :rows="2"
              v-decorator="['operationMethod',
              {
                initialValue:initValues.operationMethod,
              }
            ]"
              placeholder="请输入操作方式..."
              disabled
            />
          </a-form-item>
          <a-form-item label="请求参数">
            <a-textarea
              :rows="4"
              v-decorator="['requestParam',
              {
                initialValue:initValues.requestParam,
              }
            ]"
              placeholder="请输入请求参数..."
              disabled
            />
          </a-form-item>
          <a-form-item label="返回参数">
            <a-textarea
              :rows="4"
              v-decorator="['responseParam',
              {
                initialValue:initValues.responseParam,
              }
            ]"
              placeholder="请输入返回参数..."
              disabled
            />
          </a-form-item>
          <a-form-item label="操作状态">
            <a-input
              id="title"
              v-decorator="['operationState', {initialValue:initValues.operationState ? '失败':'成功',} ]"
              placeholder="请输入操作状态..."
              disabled
            />
          </a-form-item>
          <a-form-item label="消耗时间">
            <a-input
              id="title"
              v-decorator="['timeConsuming', {initialValue:`${initValues.timeConsuming || 0} 毫秒`} ]"
              placeholder="请输入消耗时间..."
              disabled
            />
          </a-form-item>
          <a-form-item label="操作时间">
            <a-input
              id="title"
              v-decorator="['operationTime', {initialValue:initValues.operationTime,} ]"
              placeholder="请输入操作时间..."
              disabled
            />
          </a-form-item>
        </a-form>
      </a-spin>
      <template slot="footer">
        <a-button key="back" @click="cancel">
          关闭
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { detail } from '@/api/log-manage'
import store from '@/store'
import { message } from 'ant-design-vue'

export default {
  name: 'appEditAdd',
  props: ['visible', 'record', 'type'],
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      loading: false,
      initValues:{}
    }
  },
  watch: {
    visible(val) {
      this.visible = val;
      this.detailReq();
    }
  },
  methods: {
    // 查询详情
    detailReq(){
      this.loading = true;
      const params = {
        id: this.record.id,
        userId: store.getters.userInfo?.userId,
      }
      detail(params).then(res => {
        this.loading = false;
        if (res.code === 200) {
          this.initValues = res.data;
        }
      })
    },
    cancel() {
      this.resetFormValue()
      this.$emit('cancel')
    },
    // 重置表单一般在第一次访问表单时进行重置
    resetFormValue() {
      this.$nextTick(() => {
        this.form.resetFields()
      })
    }
  }
}
</script>

<style scoped lang="less">
.modal {
  /deep/ .ant-modal {
    width: 700px !important;
  }
  /deep/ .ant-form-item {
    margin-bottom: 5px;
  }
}
</style>